<template>
    <div class="applyFor">
        <van-nav-bar title="修改密码" left-text="" left-arrow @click-left="onClickLeft" />
        <!-- <div class="topTitle">
        <title-item title1st="请填写修改的资料信息"> </title-item>
      </div> -->
        <div class="Form">
            <van-form @failed="onFailed" @submit="onSubmit">
                <van-cell-group inset>
                    <!-- 通过 pattern 进行正则校验 -->
                    <van-field v-model="mobile" name="mobile" label="账号" label-width="60" placeholder="请输入账号"
                        :rules="[{ validator, message: '请输入正确内容' }]" />
                    <!-- 通过 validator 进行函数校验 -->
                    <van-field v-model="code" label-width="60" type="text" name="code" label="验证码" placeholder="请输入验证码"
                        :rules="[{ required: true, message: '请输入验证码' }]">
                        <template #button>
                            <van-button @click="sendCode" :disabled="disabled" native-type="button" plain type="success"
                                color="#2CB9A4" size="mini">
                                {{ codeMsg }}
                            </van-button>
                        </template>
                    </van-field>
                    <van-field v-model="password" name="password" label="新密码" label-width="60" placeholder="请输入新密码"
                        :rules="[{ required: true, message: '请输入新密码' }]" />
                </van-cell-group>
                <div style="margin: 16px">
                    <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 100%)">
                        提交
                    </van-button>
                </div>
            </van-form>
            <van-popup v-model:show="showPicker" position="bottom">
                <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
        </div>
        <van-notify v-model:show="show" type="success">
            <van-icon name="bell" style="margin-right: 4px;" />
            <span>修改密码成功</span>
        </van-notify>
    </div>
</template>
  
<script setup>
import { resetPassword,sendNewCode } from "@/services";
import { showNotify } from 'vant';
import TitleItem from "@/components/title-item/title-item.vue";
import { closeToast, showLoadingToast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const mobile = ref("");
const password = ref("");
const code = ref("");
const result = ref("");
const show = ref(false)
const showPicker = ref(false);
const codeNum = ref(60)
const codeMsg = ref('获取短信验证码')
const disabled = ref(false)
const onConfirm = ({ selectedOptions }) => {
    result.value = selectedOptions[0]?.text;
    showPicker.value = false;
};
// const value4 = ref("");
// const pattern = /\d{6}/;

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) =>
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
        val
    );

const onFailed = (errorInfo) => {
    console.log("failed", errorInfo);
};
const onSubmit = async(val) => {
    console.log(val, '成功的值')
    let res = await resetPassword({...val,type:3})
    show.value =  true
    setTimeout(()=>{
        show.value =  false
        router.back()
    },1000)
}
// 返回按钮
const onClickLeft = () => {
    router.back();
};
// 获取短信验证码
const sendCode = async() => {
    // 验证手机号格式是否正确
    console.log(mobile, 'mobile')
    console.log(validator(mobile.value), '11')
    if (!validator(mobile.value)) return showNotify({ type: 'danger', message: '请输入正确的账号', background: '#2CB9A4' });
    // 禁用按钮
    let res = await sendNewCode({event:'resetpwd',mobile:mobile.value,type:3})
    disabled.value = true;
    // 倒计时
    let timer = setInterval(() => {
        codeNum.value--;
        codeMsg.value = `重新发送(${codeNum.value})`;
    }, 1000);
    // 判断什么时候停止定时器
    setInterval(() => {
        clearInterval(timer);
        codeNum.value = 60;
        disabled.value = false;
        codeMsg.value = "获取短信验证码";
    }, 60000);
}
</script>
  
<style lang="scss" scoped>
.applyFor {
    padding: 20px;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    color: #1d1b20;

    .topTitle {
        margin-left: -4px;
    }
}
</style>
  